<template>
	<view class="search_container">
		<!-- 搜索区 -->
		<view class="search_box">
			<view class="search_inp">
				<view class="search_left" @tap="change_scope">
					{{selected_text}}
				</view>
				<view style="width: 70%;">
					<input style="font-size: 30rpx;" :focus="focus" @input="onKeyInput" v-model="search_content"
						@focus="onInputFocus" @keypress.enter="search(search_content)" placeholder="搜索书籍/作者" />
				</view>
				<image class="i_clean" @tap="search_content === '' ? Back() : clean()" src="/static/clean.svg" mode=""
					v-if="search_content !== ''" />

			</view>
			<view style="text-align: center;" @tap="search(search_content)">搜索</view>
		</view>

		<!-- 历史搜索 -->
		<view class="his_search" style="background: #fff;" :hidden="search_hidden_show" v-if="history.length !== 0">
			<view class="his_top">
				<view style="font-size: 14px;">历史搜索：</view>
				<view @tap="empty">
					<image src="../../static/delete.svg" />
				</view>
			</view>
			<view style="padding: 30rpx;">
				<text class="his_text"
					style="display: inline-block; font-size: 12px; background: #f6f6f6; padding: 6px; color: #666; margin: 0 10px 10px 0;"
					v-for="(item, index) in history" :key="index" @tap="history_select(item, index)">{{item}}</text>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="hot_search" style="background: #fff;" :hidden="search_hidden">
			<view class="p-15 fsize-14" style="padding: 20rpx; font-size: 14px;">
				热门搜索：
			</view>
			<view class="" style="padding: 20rpx;">
				<text class="hot_text" style="" v-for="(item, index) in hot" :key="index"
					@tap="hot_select(item)">{{item.value}}</text>
			</view>
		</view>

		<!-- 弹框 -->
		<view class="popup">
			<!-- 遮罩层 -->
			<view class="mask" style="position: fixed; width: 100%; height: 100%;" :hidden="selected"
				@tap="change_scope_close"></view>
			<!-- 单选按钮组 -->
			<radio-group class="radio_group"
				style="background: #fff; position: fixed; width: 90%; border-radius: .5rem;" :hidden="selected"
				@change="radioChange">
				<label class="select_box" v-for="(item, index) in search_scope" :key="index">
					<view class="" style="display: flex; align-items: center;">
						<image style="width: 20px; height: 20px; margin-right: 6px;" src="/static/select.svg" mode="">
						</image>
						<text class="" style="font-size: 14px;">{{item.title}}</text>
					</view>
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
				</label>
			</radio-group>
		</view>

		<!-- 搜索结果 -->
		<view class="result_list">
			<view v-if="search_results.length > 0 " style="margin-top: 20rpx;text-align: center;">
				<text v-for="(result, index) in search_results" :key="index" class="result_text">{{ result }}</text>
			</view>
			<view v-else-if="searched" style="margin-top: 20rpx;text-align: center;">
				<text class="no_result_text">没有找到该书籍或作者</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_scope: [{
					title: '搜索书籍',
					value: 'book'
				}, {
					title: '搜索作者',
					value: 'author'
				}],
				current: 0,
				selected_text: '书籍',
				selected: true,
				focus: true,
				hot: [{
					value: '西游记',
					id: 0
				}, {
					value: '三国演义',
					id: 1
				}, 
				{
					value: '我在精神病院学斩神',
					id: 2
				},{
					value: '活着',
					id: 3
				},
				],
				search_content: '',
				history: [],
				search_hidden: false,
				search_hidden_show: false,
				search_results: [], // 搜索结果
				searched: false // 标记是否已搜索
			}
		},
		// 生命周期钩子
		onLoad() {
			let that = this;
			// 从本地存储中获取用户的历史搜索记录（如果存在）
			let list = uni.getStorageSync('history');
			if (list) {
				// 存储最近的4条记录
				that.history = list.slice(0, 4);
			}
		},
		methods: {
			radioChange(e) {
				if (e.detail.value === 'book') {
					this.selected_text = '书籍';
				} else {
					this.selected_text = '作者';
				}
				this.selected = true; // 选择后关闭弹框
			},
			change_scope() {
				this.selected = false; // 显示弹框
			},
			change_scope_close() {
				this.selected = true; // 关闭弹框
			},
			clean() {
				this.search_content = ''; // 清空输入框内容
				this.search_hidden = false; // 显示历史或热门搜索
				this.search_results = []; // 清空搜索结果
				this.searched = false; // 重置搜索状态
				this.search_hidden_show = false; // 确保历史搜索面板显示
			},
			// 回车键，搜索
			onKeyInput() {
				this.search_hidden = this.search_content !== ''; // 根据输入更新状态
			},
			// 聚焦，隐藏
			onInputFocus() {
				this.search_hidden = true; // 输入框聚焦时隐藏历史/热门搜索
			},
			// 热门搜索
			hot_select(item) {
				this.search_content = item.value;
				this.search_hidden = true;
				this.search(item.value);
			},
			// 历史搜索
			history_select(item, index) {
				this.search_content = item;
				this.search_hidden = true;
				this.search(item);
			},
			// 搜索内容
			search(search_content) {
				if (search_content === '') {
					// uni-app自带的提示
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					});
					return false;
				} else {
					// TODO: 这里的搜索逻辑可以根据项目需求替换为实际的搜索API
					let sampleData = ['活着', '三国演义', '我在精神病院学斩神', '西游记'];
					this.search_results = sampleData.filter(item => item.includes(search_content)); // 简单的模拟搜索

					if (this.search_results.length === 0) {
						this.searched = true; // 当没有结果时，更新状态
					} else {
						this.searched = false; // 找到结果
					}

					// 更新历史记录
					if (!this.history.includes(search_content)) {
						this.history.unshift(search_content);
					} else {
						let i = this.history.indexOf(search_content);
						this.history.splice(i, 1);
						this.history.unshift(search_content);
					}
					uni.setStorageSync('history', this.history);
				}
				this.search_hidden_show = true; // 显示历史搜索面板
				this.search_hidden = true; // 搜索时隐藏历史和热门搜索
			},
			empty() {
				// uni-app自带的弹框
				uni.showModal({
					title: '提示',
					content: '是否清空全部搜索历史？',
					success: res => {
						if (res.confirm) {
							this.history = [];
							uni.clearStorageSync('history');
							this.search_hidden_show = false;
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.search_container {

		// 搜索区
		.search_box {
			padding: 30rpx;
			display: flex;
			align-items: center;
			line-height: 2;
			background: #fff;

			.search_inp {
				flex: 5;
				padding: 26rpx 80rpx;
				border-radius: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				background: #f5f5f5;
				margin-right: 10px;
				position: relative;

				.search_left {
					font-size: 30rpx;
					// 上 右 下 左 （顺时针）
					padding: 0 24rpx 0 16rpx;
					border-right: 1rpx solid #ccc;
					// background-color: skyblue;
					position: absolute;
					top: 20%;
					left: 4%;
					// (x,y)
					transform: translate(0, -4%);
				}

				.i_clean {
					width: 36rpx;
					height: 36rpx;
					// background-color: skyblue;
					position: absolute;
					top: 32%;
					right: 6%;
				}
			}
		}

		// 历史搜索
		.his_search {
			.his_top {
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;

				image {
					width: 32rpx;
					height: 32rpx;
					transform: translate(30%, 0);
				}
			}

			.his_text {
				display: inline-block;
				font-size: 12px;
				background: #f6f6f6;
				padding: 6px;
				color: #666;
				margin: 0 10px 10px 0;
			}
		}

		// 热门搜索
		.hot_search {
			.hot_text {
				display: inline-block;
				font-size: 12px;
				background: #f6f6f6;
				padding: 6px;
				color: #666;
				margin: 0 10px 10px 0;
			}
		}

		// 弹框
		.popup {
			.mask {
				background: #00000080;
				z-index: 1001;
				top: 0;
			}

			.radio_group {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1002;

				.select_box {
					padding: 14px;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		// 搜索结果
		.result_list {
			
			.result_text {
				display: block;
				font-size: 16px;
				color: #333;
				margin: 5px 0;
			}

			.no_result_text {
				color: red;
				font-size: 16px;
			}
		}
	}
</style>